
Ext.ns('Movie');

var MovieRecord = Ext.data.Record.create([
   {name: 'idMovie', mapping: 'field:nth(1)'},
   {name: 'strFilename', mapping: 'field:nth(2)'},
   {name: 'strGenre', mapping: 'field:nth(3)'},
   {name: 'c00', mapping: 'field:nth(4)'},
   {name: 'c01', mapping: 'field:nth(5)'},
   {name: 'c02', mapping: 'field:nth(6)'},
   {name: 'c04', mapping: 'field:nth(7)'},
   {name: 'c14', mapping: 'field:nth(8)'},
   {name: 'c05', mapping: 'field:nth(9)'},
   {name: 'c07', mapping: 'field:nth(10)'},
   {name: 'c11', mapping: 'field:nth(11)'},
   {name: 'c12', mapping: 'field:nth(12)'},
   {name: 'c15', mapping: 'field:nth(13)'},
   {name: 'c18', mapping: 'field:nth(14)'},
   {name: 'strPath', mapping: 'field:nth(15)'},
]);


Movie.Store = function(config) {
	var config = config || {};
	Ext.applyIf(config, {
		sortInfo: {field: 'strGenre', direction: "ASC"},
		groupField: 'strGenre',
		reader: new Ext.data.XBMCQueryReader({
           // records will have a "record" tag
			record: 'record',	       
       }, MovieRecord)
	});
	Movie.Store.superclass.constructor.call(this, config);
};
Ext.extend(Movie.Store, Ext.data.GroupingStore);

Movie.Form = Ext.extend(Ext.FormPanel, {

	initComponent:function() {
		Ext.apply(this, {
			//title:'Movie Details',
			bodyStyle:'padding:5px 5px 0',
			viewconfig: {forceFit: true},
			width: 800,
			xtype: 'form',
			frame: true,
			layout:'column',	
			defaults:{
				
				layout:'form',
				hideLabels:true,
				border:false,
				bodyStyle:'padding:4px',
			},
			items:[{
				defaults:{xtype:'fieldset', layout:'form', anchor:'100%', autoHeight:true},
				columnWidth:0.56,
				items:[{
					xtype: 'fieldset',
					title:'details',
					defaults: {xtype:'textfield', width: 300},
					items: [{
						fieldLabel: 'Title',
						name: 'c00',
						allowBlank: false
					},{
						fieldLabel: 'Release',
						name: 'c07',
						readOnly: true,
					},{
						xtype:'textarea',
						height: 100,
						id:'c01',
						fieldLabel:'Description',
						width:300
					},{
						xtype:'textarea',
						height: 50,
						id:'c02',
						fieldLabel:'Abstract',
						width:300
					},{
						xtype: 'textfield',
						fieldLabel: 'Duration',
						name: 'c11',
					},{
						xtype: 'textfield',
						fieldLabel: 'Producer',
						name: 'c15',
					},{
						xtype: 'textfield',
						fieldLabel: 'Viewers',
						name: 'c12',
					},{
						xtype: 'textfield',
						fieldLabel: 'Studio',
						name: 'c18',
					},{
						xtype: 'textfield',
						fieldLabel: 'File name',
						name: 'strFilename',
						readOnly: true,
					},{
						xtype: 'textfield',
						fieldLabel: 'Directory',
						name: 'strPath',
						readOnly: true,
					}]
				}]
				},{
				defaults:{xtype:'fieldset', layout:'form', anchor:'100%', autoHeight:true},
				columnWidth:0.44,
				items:[{
					xtype: 'fieldset',
					title: 'Rating and Cover',
					items: [{
						xtype: 'container',
						id: 'rating',
						fieldLabel: 'IMDB rating',
						border: 0,
						width: 96,
						height:27,
						autoEl: {tag: 'img', src: jpgrating(0)}
					},{
						xtype: 'container',
						id: 'cover',
						fieldLabel: 'Movie Cover',
						width: 300,
						height:400,
						autoEl: {tag: 'img', src: "images/defaultMovieCover.jpg"}
					}]
				}]
			}]
				
		}); // eo config object
		// apply config

		// call parent
		Movie.Form.superclass.initComponent.apply(this, arguments);
	}, // eo function initComponent
	updateDetail: function(record) {
		this.getForm().loadRecord(record);
		
		// calculate rating in stars only one time and add it to the data record 
		if (record.data.ratingstars == undefined){
			record.data.ratingstars = jpgrating(record.data.c05);
		}
		var myrate = Ext.getCmp('rating')
		myrate.getEl().dom.src = record.data.ratingstars;
		
		// get the cover only one time and add it to the data record -- need to work on thumbs tags--
		var mycover = Ext.getCmp('cover');
		if (record.data.cover == undefined){
			var file = record.data.strFilename;
			var path = record.data.strPath;
			var	filetemp = file.substring(0, file.length-3);
			var fileUrl = path+filetemp+'tbn';
		    var inputUrl = '/xbmcCmds/xbmcHttp?command=filedownload&parameter=' + fileUrl;
			Ext.Ajax.request({
				url: inputUrl,
				method: 'GET',
				success: function (t){
					var temp = t.responseText.replace(/<html>/g, "");
					temp = temp.replace(/<\/html>/, "");
					if (temp.length > 10)
						record.data.cover = "data:image/jpeg;base64," + temp;
					mycover.getEl().dom.src = record.data.cover;
				},
				failure: function(t){
					record.data.cover = "images/defaultMovieCover.jpg";
					mycover.getEl().dom.src = record.data.cover;
				},
				timeout: 2000
			});		
		}
		else{
			mycover.getEl().dom.src = record.data.cover
		}
		
	}

}); // eo extend
Ext.reg('Movieform', Movie.Form);
// grid
Movie.Grid = Ext.extend(Ext.grid.GridPanel, {
	initComponent:function() {
		Ext.apply(this, {
			cm: colModel,
			//cls: container_body,
			viewconfig: {forceFit: true},
			view: new Ext.grid.GroupingView({
							forceFit:true,
							startCollapsed: true,
							groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'}),
			sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
			store: new Movie.Store({
				storeId: 'gridmoviestore',
				url: '../../MovieQuery.asp'
			})
		}); // eo config object
		// apply config

		// call parent
		Movie.Grid.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent
}); // eo extend
Ext.reg('Moviegrid', Movie.Grid);
 
//Main Panel

Movie.Mainpanel = Ext.extend(Ext.Panel, {
	initComponent: function() {
		Ext.applyIf(this, {
			frame: true,
			title: 'Movie List',
			width: 1300,
			height: 800,
			layout: 'border',
		items: [{
					xtype: 'Moviegrid',
					itemId: 'Moviegrid',
					region: 'center',
					height: 400,
					split: true
				},{
					region: 'east',
					xtype: 'Movieform',
					itemId: 'detailPanel',
					width: 600,
					split: true
				}]
		})
			
		Movie.Mainpanel.superclass.initComponent.call(this);
	},
	
	initEvents: function() {
		Movie.Mainpanel.superclass.initEvents.call(this);
		var MovieSm = this.getComponent('Moviegrid').getSelectionModel();		
		MovieSm.on('rowselect', this.onRowSelect, this);		
	},

	onRowSelect: function(sm, rowIdx, r) {
		var detailPanel = this.getComponent('detailPanel');
		detailPanel.updateDetail(r);			
	}
});

Ext.reg('Mainpanel', Movie.Mainpanel);
